<template>
    <view class="pages" :class="GlobalThemes.commonBackGroundClass">
        <view class="search-top-box" id="navbar">
            <u-navbar
                :is-back="true"
                back-icon-color="#ffffff"
                :border-bottom="false"
                :background="typelist[tabIndex].background"
            >
                <view class="mp-name">
                    <text>{{ i18n('index').appName }}</text>
                </view>
                <view class="slot-wrap"><view class="search-wrap"></view></view>
            </u-navbar>
        </view>
        <view
            class="content-box"
            :style="{
                backgroundImage: 'url(' + imageSrc + ')',
                backgroundSize: '100% 100%',
                height: mainScrollHeight + 'px'
            }"
        >
            <view class="content-box-fixed">
                <view class="content-box-fixed-text" :style="{ backgroundColor: typelist[tabIndex].color }" @click="downloadImg">
                    <text>免费下载</text>
                </view>
            </view>
        </view>
        <!-- 加载条 -->
        <w-loading :text="loadingBoxText" mask="true" click="false" ref="loading"></w-loading>
    </view>
</template>

<script>
import AppMethods from './methods/app_methods.js'
export default {
    ...AppMethods
};
</script>

<style>
page {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px;
}

@supports (top: constant(safe-area-inset-top)) {
    page {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left);
    }
}

@supports (top: env(safe-area-inset-top)) {
    page {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left);
    }
}
</style>

<style lang="scss">
.pages {
    .content-box {
        position: relative;
        height: 800upx;
        .content-box-fixed {
            width: 750rpx;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            align-content: center;
            position: fixed;
            top: calc(100vh - 88rpx - 100rpx - var(--safe-area-inset-bottom) - var(--status-bar-height));
            opacity: 0.8;
            .content-box-fixed-text {
                width: 60%;
                text-align: center;
                color: #ffffff;
                padding: 20upx 0;
                border-radius: 30upx;
            }
        }
    }
}
</style>
